<template>
	<view class="retrieve">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- 内容 -->
		<view class="cont">
			<view class="name">绑定/修改手机号码</view>
			<wInput v-model="phoneData" type="text" maxlength="11" placeholder="请输入手机号"></wInput>
			<wInput v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
			<view class="tips"></view>
			<wButton text="确 定" :rotate="isRotate" @click.native="startReg()"></wButton>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import wInput from '@/components/button/watch-input.vue'; //input
import wButton from '@/components/button/watch-button.vue'; //button
import { mapState, mapMutations } from 'vuex';

var _this;
export default {
	computed: mapState(['hasLogin', 'uerInfo']),
	components: {
		PublicHeader,
		wInput,
		wButton
	},
	data() {
		return {
			title: '',
			phoneData: '', //电话
			passData: '', //密码
			parentId:'', //邀请码
			passData2: '', //再次输入密码
			verCode: '', //验证码
			showAgree: true, //协议是否选择
			isRotate: false //是否加载旋转
		};
	},
	mounted() {
		console.log(this.uerInfo)
		_this = this;
	},
	methods: {
		isShowAgree() {
			//是否选择协议
			_this.showAgree = !_this.showAgree;
		},
		getVerCode() { //获取验证码
			if (this.phoneData.length!==11||this.phoneData[0]!=1) {
			// if (_this.phoneData.length != 11) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请正确填写手机号'
				});
				return false;
			}
			_this.$http.post('/user/sendcaptcha',{
				phone:_this.phoneData
			}).then(function (response) {
			    console.log('成功',response)
					_this.$refs.runCode.$emit('runCode'); //触发倒计时
			}).catch(function (error) {
			    //这里只会在接口是失败状态返回，不需要去处理错误提示
			    console.log('失败',error);
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码发送失败'
					});
			});
		},
		startReg() { //注册
			if (this.phoneData.length!==11||this.phoneData[0]!=1) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请正确填写手机号'
				});
				return false;
			}
			if (_this.verCode.length != 6) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '验证码不正确'
				});
				return false;
			}
			_this.isRotate = true;
			_this.$http.post('/user/captchaverify',{
				phone:_this.phoneData,
				captcha:_this.verCode
			}).then(function (response) {
				_this.$http.post('/personal/center/updatephone',{
					phone:_this.phoneData,
					captcha:_this.verCode,
					account:_this.uerInfo.userName
				}).then(function (response) {
						setTimeout(function() {
							_this.isRotate = false;
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '修改成功'
							});
							uni.navigateTo({
								url:'/pages/personal/index'
							})
						}, 1000);
				}).catch(function (error) {
				    //这里只会在接口是失败状态返回，不需要去处理错误提示
				    console.log('失败',error);
						_this.isRotate = false;
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: error.msg
						});
				});
			}).catch(function (error) {
			    //这里只会在接口是失败状态返回，不需要去处理错误提示
			    console.log('失败',error);
					_this.isRotate = false;
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码错误，请重新输入'
					});
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.cont{
		padding: 0 84rpx;
		color: #A4A9B0;
		font-size: 24rpx;
		letter-spacing: 0.67rpx;
		line-height: 52rpx;
		margin-top: 50rpx;
	}
	.cont .title{
		font-size: 32rpx;
		color: #333;
		letter-spacing: 1.52rpx;
		line-height: 45rpx;
		margin-bottom: 10rpx;
	}
	.cont .name{
		font-size: 50rpx;
		color: #333;
		line-height: 70rpx;
		letter-spacing: 2.38rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	.cont > navigator{
		color: #65B4FF;
		font-size: 32rpx;
		letter-spacing: 1.52rpx;
		line-height: 45rpx;
		
	}
	.cont input{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #333;
		letter-spacing: 1.71;
		border-bottom: 1rpx solid #E7E7E7;
		margin-bottom: 10rpx;
	}
	.cont .btn{
		width:582rpx;
		height:84rpx;
		line-height: 84rpx;
		text-align: center;
		background-color: $uni-color1;
		box-shadow:0px 14rpx 40rpx 0rpx $uni-color1;
		border-radius: 45rpx;
		color: #fff;
		font-size: 32rpx;
		/* margin-top: 30rpx; */
	}
	.cont .password{
		position: relative;
	}
	.cont .password view{
		position: absolute;
		right: 0;
		top: 24rpx;
		color: $uni-color1;
	}
	.cont .nav{
		color: #888;
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.cont .tips{
		height: 100rpx;
		line-height:70rpx;
	}
	.mor{
		position: relative;
		padding: 64rpx;
		margin: 0 auto;
	}
	.mor .line{
		width: 100%;
		height: 1rpx;
		background-color: #e6e6e6;
	}
	.mor .ot{
		width: 180rpx;
		text-align: center;
		position: absolute;
		font-size: 24rpx;
		color: #888;
		letter-spacing: 1.14rpx;
		left: 50%;
		top: 48rpx;
		margin-left: -90rpx;
		background: #fff;
		margin-bottom: 52rpx;
	}
	.mor-link{
		color: #888;
		font-size: 22rpx;
		letter-spacing: 0.85rpx;
		width: 300rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.mor-link image{
		width: 48rpx;
		margin-left: 22rpx;
		margin-bottom: 18rpx;
	}
</style>
